<!-- 首页卡片 -->
<template>
  <div class="home-index-content">
    <div class="home-item">
      <div class="home-item-header">
        <h3>
          <span> <img :src="imgArr[headIcon]" alt="" /> </span
          ><span>{{ title }}</span>
        </h3>
        <div style="flex:1">
          <div class="data-box" v-if="isTimer">
            <BtnData @BtnDataClick="checkedTimer" />
          </div>
        </div>
        <div class="home-item-action">
          <slot name="action"></slot>
          <div class="search-box" v-if="isSearch">
            <Select v-model="modelValue" filterable v-if="!$props.isDept" clearable>
              <Option
                v-for="item in companyList"
                :value="item.companyId"
                :key="item.companyId"
                >{{ item.companyName }}</Option
              >
            </Select>
            <TreeSelect
              v-else
              v-model="modelValue"
              :data="companyList"
              filterable
              clearable
              v-width="200"
            />
            <Button type="primary" style="margin-left: 10px" @click="addTotal()"
              >添加</Button
            >
          </div>
        </div>
      </div>
      <div class="home-item-content">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import img_8 from "@/assets/icon/icon_08.png";
import img_9 from "@/assets/icon/icon_09.png";
import img_10 from "@/assets/icon/icon_10.png";

import { getOrgTree } from "@/api/system.js";
import util from "@/libs/util";

export default {
  name: "home-page",
  props: {
    title: {
      type: String,
      default: "",
    },
    // 显示搜索
    isSearch: {
      type: Boolean,
      default: false,
    },
    // 显示时间
    isTimer: {
      type: Boolean,
      default: false,
    },
    // 图标
    headIcon: {
      type: String,
      default: "img_8",
    },
    // 显示部门
    isDept: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      modelValue: "",
      companyList: [],
      imgArr: {
        img_8,
        img_9,
        img_10,
      },
    };
  },
  methods: {
    checkedTimer(item) {
      this.$emit("checkedTimer", item);
    },
    // 添加统计搜索条件
    addTotal() {
      this.$emit("checkedSearch", this.modelValue);
    },
    async getOrgTreeAction() {
      let data = await getOrgTree({
        companyId: util.cookies.get("companyId"),
        isShowCompanyDepartment: this.$props.isDept,
        isIncludeOneself: true,
        isInclusionChildren: true,
      });
      if (this.$props.isDept) {
        const filterCompany = (list) => {
          list.forEach((o) => {
            o.title = o.companyName;
            o.label = o.companyName;
            o.expand = true;
            o.value = o.companyId;
            if (o.childrenCompanyList) {
              o.children = o.childrenCompanyList;
              filterCompany(o.children);
            }
          });
        };
        filterCompany(data);
      }
      this.companyList = data;
    },
  },
  mounted() {
    if (this.$props.isSearch) {
      this.getOrgTreeAction();
    }
  },
};
</script>

<style lang="less" scoped>
.home-item {
  border-radius: 6px;
  background: #fff;
  padding: 20px;
  .home-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 20px;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
      }
      span:nth-child(1) {
        margin-right: 20px;
        border-radius: 50%;
        flex: none;
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.home-item-action {
  display: flex;
  align-items: center;
}
.data-box {
  width: 140px;
}
.search-box {
  display: flex;
}
</style>
